import React, { useState } from 'react';
import MarkdownEditor from '../components/MarkdownEditor';
import MarkdownViewer from '../components/MarkdownViewer';
import MarkdownRenderer from '../components/MarkdownRenderer';
import { parseMarkdownMetadata, generateTableOfContents, calculateReadingTime } from '../utils/markdownUtils';
import './MarkdownDemo.css';

const MarkdownDemo: React.FC = () => {
  const [content, setContent] = useState(`---
title: "Markdown功能演示"
description: "这是一个展示Markdown处理功能的演示页面"
author: "系统管理员"
date: "2024-12-19"
tags: ["markdown", "demo", "功能展示"]
category: "技术文档"
---

# Markdown功能演示

欢迎使用我们的Markdown处理系统！这个页面展示了完整的Markdown功能。

## 🚀 主要功能

### 1. Markdown渲染
- 支持标准Markdown语法
- 支持GitHub风格的Markdown (GFM)
- 代码高亮显示
- 表格渲染
- 数学公式支持

### 2. 实时编辑
- 所见即所得编辑
- 实时预览
- 工具栏快捷操作
- 全屏编辑模式

### 3. 高级功能
- 元数据解析
- 目录生成
- 阅读时间计算
- 链接验证

## 📝 示例内容

### 代码块
\`\`\`javascript
function greet(name) {
  console.log(\`Hello, \${name}!\`);
}

greet('World');
\`\`\`

### 表格
| 功能 | 状态 | 描述 |
|------|------|------|
| 渲染 | ✅ | 支持标准Markdown |
| 编辑 | ✅ | 实时编辑预览 |
| 导出 | ✅ | 多种格式导出 |

### 列表
- [x] 完成基础功能
- [x] 添加高级特性
- [ ] 性能优化
- [ ] 用户测试

### 引用
> 这是一个引用块，用于突出显示重要信息。
> 
> 可以包含多行内容。

### 数学公式
行内公式：$E = mc^2$

块级公式：
$$
\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n
$$

## 🔧 使用方法

1. **基础渲染**：使用 \`MarkdownRenderer\` 组件
2. **编辑器**：使用 \`MarkdownEditor\` 组件
3. **查看器**：使用 \`MarkdownViewer\` 组件

## 📊 统计信息

- 总字符数：${content.length}
- 阅读时间：${calculateReadingTime(content)} 分钟
- 标题数量：${generateTableOfContents(content).length}

---

*最后更新：2024年12月19日*`);

  const [activeTab, setActiveTab] = useState<'editor' | 'viewer' | 'renderer'>('editor');
  const [showMetadata, setShowMetadata] = useState(true);
  const [showToc, setShowToc] = useState(true);
  const [showReadingTime, setShowReadingTime] = useState(true);

  const { metadata } = parseMarkdownMetadata(content);
  const toc = generateTableOfContents(content);
  const readingTime = calculateReadingTime(content);

  return (
    <div className="markdown-demo">
      <div className="demo-header">
        <h1>📝 Markdown功能演示</h1>
        <p>完整的Markdown处理解决方案</p>
      </div>

      <div className="demo-controls">
        <div className="tab-buttons">
          <button
            className={activeTab === 'editor' ? 'active' : ''}
            onClick={() => setActiveTab('editor')}
          >
            ✏️ 编辑器
          </button>
          <button
            className={activeTab === 'viewer' ? 'active' : ''}
            onClick={() => setActiveTab('viewer')}
          >
            👁️ 查看器
          </button>
          <button
            className={activeTab === 'renderer' ? 'active' : ''}
            onClick={() => setActiveTab('renderer')}
          >
            🎨 渲染器
          </button>
        </div>

        <div className="options">
          <label>
            <input
              type="checkbox"
              checked={showMetadata}
              onChange={(e) => setShowMetadata(e.target.checked)}
            />
            显示元数据
          </label>
          <label>
            <input
              type="checkbox"
              checked={showToc}
              onChange={(e) => setShowToc(e.target.checked)}
            />
            显示目录
          </label>
          <label>
            <input
              type="checkbox"
              checked={showReadingTime}
              onChange={(e) => setShowReadingTime(e.target.checked)}
            />
            显示阅读时间
          </label>
        </div>
      </div>

      <div className="demo-content">
        {activeTab === 'editor' && (
          <div className="demo-section">
            <h2>Markdown编辑器</h2>
            <MarkdownEditor
              initialContent={content}
              onChange={setContent}
              height="500px"
              showPreview={true}
              showToolbar={true}
              enableFullscreen={true}
            />
          </div>
        )}

        {activeTab === 'viewer' && (
          <div className="demo-section">
            <h2>Markdown查看器</h2>
            <MarkdownViewer
              content={content}
              showMetadata={showMetadata}
              showToc={showToc}
              showReadingTime={showReadingTime}
              enableCopy={true}
            />
          </div>
        )}

        {activeTab === 'renderer' && (
          <div className="demo-section">
            <h2>Markdown渲染器</h2>
            <MarkdownRenderer
              content={content}
              enableCopy={true}
              maxHeight="600px"
            />
          </div>
        )}
      </div>

      <div className="demo-info">
        <div className="info-card">
          <h3>📊 文档信息</h3>
          <div className="info-grid">
            <div className="info-item">
              <span className="label">字符数:</span>
              <span className="value">{content.length}</span>
            </div>
            <div className="info-item">
              <span className="label">阅读时间:</span>
              <span className="value">{readingTime} 分钟</span>
            </div>
            <div className="info-item">
              <span className="label">标题数:</span>
              <span className="value">{toc.length}</span>
            </div>
            <div className="info-item">
              <span className="label">元数据:</span>
              <span className="value">{Object.keys(metadata).length} 项</span>
            </div>
          </div>
        </div>

        {Object.keys(metadata).length > 0 && (
          <div className="info-card">
            <h3>📋 元数据</h3>
            <div className="metadata-list">
              {metadata.title && (
                <div className="metadata-item">
                  <span className="key">标题:</span>
                  <span className="value">{metadata.title}</span>
                </div>
              )}
              {metadata.description && (
                <div className="metadata-item">
                  <span className="key">描述:</span>
                  <span className="value">{metadata.description}</span>
                </div>
              )}
              {metadata.author && (
                <div className="metadata-item">
                  <span className="key">作者:</span>
                  <span className="value">{metadata.author}</span>
                </div>
              )}
              {metadata.date && (
                <div className="metadata-item">
                  <span className="key">日期:</span>
                  <span className="value">{metadata.date}</span>
                </div>
              )}
              {metadata.tags && metadata.tags.length > 0 && (
                <div className="metadata-item">
                  <span className="key">标签:</span>
                  <div className="tags">
                    {metadata.tags.map((tag: string, index: number) => (
                      <span key={index} className="tag">{tag}</span>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

        {toc.length > 0 && (
          <div className="info-card">
            <h3>📑 目录结构</h3>
            <div className="toc-preview">
              {toc.map((item, index) => (
                <div key={index} className="toc-item">
                  <span className="toc-level">H{item.level}</span>
                  <span className="toc-title">{item.title}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default MarkdownDemo;
